<template>
    <div>
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
        <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
    </div>
</template>

<script>
    import axios from 'axios'
    import CityHeader from "./Header";
    import CitySearch from "./Search";
    import CityList from "./List"
    import CityAlphabet from "./Alphabet"

  export default {
    name: "City",
      components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
     data (){
        return {
            cities:{},
            hotCities:[],
            letter:''
        }
     },
     methods:{
        getCityInfo (){
            axios.get('/city.json')
                    .then(this.handleGetCityInfoSucc)
        },
        handleGetCityInfoSucc (res){
            res=res.data;
            if (res.ret && res.data) {
                const data=res.data;
                this.cities=data.cities;
                this.hotCities=data.hotCities;
            }
        },
         handleLetterChange (letter) {
            this.letter=letter
         }
     },
      mounted() {
        this.getCityInfo()
      }
  }
</script>

<style lang="stylus" scoped>

</style>